
#buttonGroup{
    margin: 100px auto;
    text-align: center;
}
input{
    display: none;
}
label{/*把label标签当成按钮*/
    font-weight: bold;
    color: #564857;
    padding:5px 8px;
    border:2px outset #d78900;
    border-radius: 5px;
    box-shadow: 2px 2px 3px gray;
    background: linear-gradient(150deg, #fafafa, orange);
    cursor: pointer;
    position: relative;
}
label:active{
    left: 1px;
    top: 1px;
    box-shadow: 1px 1px 2px gray;
}
.view{/*外部视图，用于在内部显示立体图形*/
    width:300px;
    height:300px;
    margin:100px auto 50px;
    perspective: 800px;
}
.box{/*整个立方体*/
    width:100%;/*没有这两个100%，立方体的旋转中心可能不在他自己的几何中心*/
    height:100%;
    transition: all 1s ease;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(20deg);

}
[class^=box_]{/*立方体的各个面*/
    border:3px solid #333;
    position: absolute;
    box-shadow: 0 0 100px #7d7d7d inset;
    width:300px;
    height:300px;
    opacity: 0.85;
    text-align: start;
    line-height: 300px;
    font-size: 5em;
    text-shadow: 0 0 5px white;
    background-size: cover;
}
.box_front{
    transform: translate3d(0,0,150px);
    /*background-image: url("../img/兔.jpg");*/
}
.box_back{
    transform: translate3d(0,0,-150px) rotateY(180deg);
    /*background-image: url("../img/牛.jpg");*/
}
.box_left{
    transform: translate3d(-150px,0,0) rotateY(-90deg);
    /*background-image: url("../img/狗.jpg");*/
}
.box_right{
    transform: translate3d(150px,0,0) rotateY(90deg);
    /*background-image: url("../img/猪.jpg");*/
}
.box_top{
    transform: translate3d(0,-150px,0) rotateX(90deg);
    /*background-image: url("../img/鸟.jpg");*/
}
.box_bottom{
    transform: translate3d(0,150px,0) rotateX(-90deg);
    /*background-image: url("../img/鸡.jpg");*/
}

#left:checked ~ .view .box{
    transform:rotateY(90deg);
}
#right:checked ~ .view .box{
    transform:rotateY(-90deg);
}
#front:checked ~ .view .box{
    transform:rotateY(0deg);
}
#back:checked ~ .view .box{
    transform:rotateY(-180deg);
}
#top:checked ~ .view .box{
    transform:rotateX(-90deg);
}
#bottom:checked ~ .view .box{
    transform:rotateX(90deg);
}








